import React from 'react'
import { RootState, useDispatch, useSelector } from '@/redux'
import { Dropdown } from 'antd'
import type { MenuProps } from 'antd'
import { useTranslation } from 'react-i18next'
import { setAssemblySize } from '@/redux/modules/global'
import type { SizeType } from 'antd/lib/config-provider/SizeContext'

const AssembleSize = () => {
  const { assemblySize } = useSelector((state: RootState) => state.global)
  const dispatch = useDispatch()
  const { t } = useTranslation()
  const items: MenuProps['items'] = [
    {
      key: 'small',
      label: <span>{t('small')}</span>,
      disabled: assemblySize === 'small'
    },
    {
      key: 'middle',
      label: <span>{t('middle')}</span>,
      disabled: assemblySize === 'middle'
    },
    {
      key: 'large',
      label: <span>{t('large')}</span>,
      disabled: assemblySize === 'large'
    }
  ]
  const onClick: MenuProps['onClick'] = ({ key }) => {
    dispatch(setAssemblySize(key as SizeType))
  }
  return (
    <Dropdown menu={{ items, onClick, selectable: true }} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
      <i className="icon-style iconfont icon-size" />
    </Dropdown>
  )
}

export default AssembleSize
